import React, {  Component } from 'react';
import '../../../../assets/styles/Controlpage/Fengshan.css'
import { Switch } from 'antd';

class Fengshan extends Component {
    state={
       img1:'',
       img2:'',
       ksig2: null,
    }
    render() {
        const men2 = () => {
            this.props.aaa()
            // this.setState({
            //     ksig1: !this.state.ksig1
            // })

        }
        // const fen = (defaultChecked) => {
        //     if(defaultChecked){
        //         this.state.img2.style.display= `block`;
        //         this.state.img1.style.display= `none`;
        //     }else{
        //         this.state.img1.style.display= `block`;
        //         this.state.img2.style.display= `none`;
        //     }
        // }
        const keig = this.state.ksig2
        const y = { display:`block` }
        const y1 = {  display: 'none' }
        const x = { display: 'none'}
        const x1 = { display: 'block' }
        return (
            <div >
                <p>&nbsp;喷灌</p>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={this.state.ksig2} className="kaiguan" onClick={(checked) => { men2(checked) }} />
                <img src={require('../../../../assets/Image/pentou.png')} className='img1'  style={ keig? y1:y}/>
                <img src={require('../../../../assets/Image/kongzhiye_16.png')} className='img2' style={ keig? x1:x}  />
            </div>
        );
    }
    componentDidMount() {
        
        var img1 = document.querySelector('.img1')
        var img2 = document.querySelector('.img2')
        img1.style.margin= '30px auto'
        img2.style.margin= '30px auto';
        this.setState({
            img1,
            img2
        })
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.value !== prevState.ksig1) {
            return {
                ksig2: nextProps.value
            }
        } else {
            return null
        }
    }
    
}

export default Fengshan;
